<template>
  <div class="cata">
    <template v-for="(parent, pIndex) in list">
      <div :key="parent.id">
        <div class="cata-submenu-title">第{{pIndex + 1 | toChinesNum}}章 {{parent.name}}</div>
        <div class="cata-list">
          <div class="cata-item" v-for="(child, cIndex) in parent.children" :key="child.id">
            <div class="cata-item-header">
              <div class="cata-item-title"><span class="iconfont icon-bofang"></span> 第{{cIndex + 1 | toChinesNum}}节 {{child.name}}</div>
              <div class="icon">
                <span class="iconfont icon-suoding"></span>
              </div>
            </div>
            <div class="cata-item-footer">
              27:35
            </div>
          </div>
        </div>
      </div>
      
    </template>
    
  </div>
</template>

<script>
export default {
  props: {
    list: Array
  },

  filters: {
    toChinesNum (num) {
      let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      let unit = ["", "十", "百", "千", "万"];
      num = parseInt(num);
      let getWan = (temp) => {
      　　let strArr = temp.toString().split("").reverse();
      　　let newNum = "";
      　　for (var i = 0; i < strArr.length; i++) {
        　　newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
      　　}
      　 return newNum;
      }
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) {　noWan = "0" + noWan;　　　 }
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    }
  }

  
}
</script>

<style scoped>

.cata {
  padding: 25px;
}
.cata-submenu-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  height: 30px;
  line-height: 30px;
}

.cata-item {
  margin: 20px 0;
}

.cata-item-header {
  display: flex;
  justify-content: space-between;
}

.cata-item-header .icon {
  color: #666;
}

.cata-item-title {
  font-size: 14px;
  color: #666;
}

.cata-item-footer {
  font-size: 12px;
  color: #ccc;
  margin-top: 6px;
}

</style>